<template>
  <div class="use-ref-history">
    <p>
      <button @click="undo">Undo 撤销</button>
      <button @click="redo">Redo 重做</button>
    </p>
    <textarea v-model="text"></textarea>
    <ul>
      <li v-for="item in history" :key="item.timestamp">
        {{ item }}
      </li>
    </ul>
    <hr>
    <p>history数组的第一个元素是 {{ history[0] }}</p>
    <p v-if="history.length > 1">history数组的最后一个元素是 {{ history[history.length - 1] }}</p>
  </div>
</template>

<script setup>
import {useRefHistory} from "@vueuse/core";
import {reactive, ref} from "vue";

const obj = {count: 3}
const text = ref('');

const state1 = ref(obj)
const state2 = reactive(obj)
console.log(state1)
console.log(state2)

/**
 * history分析
 * 每当在input输入框中文本发生变化, 都会向数组头部插入一条记录 (头插法)
 * 该记录里面包含两个字段, 一个是snapshot快照, 信息为输入框发生变化后的文本内容
 * 例如: 当输入一个数字/字母, 都会向数组头部插入一条记录
 * 按下Backspace删除一个字, 按下Delete删除所有字, 都会向数组头部插入一条记录
 * #
 * redo分析:
 * 撤销, 它对history数组的操作是, 删除数组中的第一个元素(前提条件, 数组元素个数 > 1)
 *
 * undo分析
 * 重做, 触发前提条件: 点击了redo撤销, 重做才会触发,
 * 简单概况就是, 复原redo撤销操作删除数组中第一个元素, 让数组头部插入一个刚撤销删除的元素
 */
const {history, redo, undo} = useRefHistory(text);
</script>

<style lang="less" scoped>
.use-ref-history {

  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;
    margin-bottom: 10px;
  }
}


</style>
